<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

  <html>

  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>DisSim</title>
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <link href="./css/style.css" rel="stylesheet" type="text/css" media="screen" />
    <link rel="stylesheet" type="text/css" href="css/jquery.autocomplete.css" />

    <script src="js/jquery-3.2.1.js" type="text/javascript"></script>
    <script type="text/javascript" src="js/jquery.autocomplete.js"></script>
    <script type="text/javascript" src="js/jquery.autofill.min.js"></script>
    <style>
      #graphlink {
        display: none;
        margin: 20px 30px;
        font-size: 20px;
      }

      input#result {
        margin: 5px 30px;
        padding: 0px 10px;
        height: 25px;
        width: 200px;
        font: normal 16px/23px Arial, Helvetica, sans-serif;
      }

      a.txt {
        text-decoration: underline;
        color: #EB1D1D;
      }
    </style>
    <!-- <script type="text/javascript">
            $().ready(function() {
                function parseFn(data) {
                    var rows = [];
                    for (var i = 0; i < data.length; i++) {
                        rows[rows.length] = {
                            data: data[i],
                            value: data[i].name, //选定后实际数据格式  
                            result: data[i].name
                        };
                    }
                    return rows;
                }
                var myJSONObject = [{
                    "id": "DOID:4",
                    "name": "disease"
                }, {
                    "id": "DOID:4000",
                    "name": "ovary transitional cell carcinoma"
                }];


                $("#searcharea").autofill({
                    value: "Input Disease ID",
                    activeTextColor: "#111",
                    defaultTextColor: "#999"
                });

                $("#searcharea").autocomplete('autoComplete.jsp', {
                    multiple: false,
                    autoFill: false,
                    mustMatch: false,
                    matchContains: true,
                    dataType: 'json',

                    extraParams: {
                        database: function() {
                            var db = "";
                            /*for(var i=0; i<document.getElementsByName('database').length; i++)
                            {
                            	if(document.getElementsByName('database')[i].checked)
                            		db = document.getElementsByName('database')[i].value;
                            }*/
                            //alert(db);

                            db = document.getElementById('database').value;
                            return db;
                        }
                    },

                    parse: parseFn,
                    formatItem: function(row, i, max) {
                        return row.name;
                    },
                    formatMatch: function(row, i, max) {
                        return row.name;
                    },
                    formatResult: function(row, i, max) {
                        return row.name;
                    }
                }).result(function(event, item, formatted) { //把返回的结果内容显示在其他文本框上              
                    $("#ortherid").val(item.name);
                });
            });
        </script>


        <script type="text/javascript">
            function checkValue() {

                var diseaseName = document.getElementById("searcharea").value;
                if (diseaseName = null || diseaseName == "Input Disease ID" || diseaseName == "") {
                    alert("Input Disease ID");
                    this.searcharea.focus();
                    return false;
                }

                var methods = document.getElementsByName("method");
                var method = "";
                for (var i = 0; i < methods.length; i++) {
                    if (methods[i].checked) {
                        method += "|" + methods[i].value;
                    }
                }
                document.getElementById("alogorith").value = method;

                if (method == "") {
                    alert("Select Methods");
                    this.alogorithSelect.focus();
                    return false;
                }

                return true;
            }
        </script> -->

    <script>
      var id1, id2;
      var type;

      $(function() {
        $('#myform').on('submit', function(event) {
          event.preventDefault();
          if (!checkValues()) {
            return;
          }
          id1 = $('#searcharea1').val();
          id2 = $('#searcharea2').val();
          //   alert(id1);
          //   alert(id2);
          $.ajax({
            url: 'fooAction_' + $("input[name='pvalue']").val(),
            data: {
              id1: id1,
              id2: id2
            },
            success: function(data) {
              $('#result').val(data); //显示计算结果
              $('#graphlink').css("display", "block");
            },
            error: function() {
              alert('数据加载出错了');
            }
          })
        });
      })

      function checkValues() {
        if ($('#id1').val == null || $('#id2').val == null) {
          alert('Please input id');
          return false;
        }
        alert($("input[name='pvalue']").val());
        return true;
      }
    </script>
  </head>


  <body>
    <!--  logo and menu -->
    <%@include file="menu.jsp"%>

      <!-- end #header-wrapper -->
      <div id="page">
        <div id="content">
          <div class="post">
            <h2 class="title">Exploring Similar Diseases</h2>

          </div>

          <form id="myform" name="topSearch" onsubmit="return checkValue()" action="TopSearch" method="post">

            <!------------------- step 1 ---------------->
            <div class="container">
              <div class="post">

                <h2 class="title">Step 1. Select two disease's ids.</h2>

                <p class="byline">
                  Disease ID: <a href="./download/bp_terms.txt" target="_Blank" class="txt" onMouseOut="this.style.textDecoration='underline'" onMouseOver="this.style.textDecoration='none'">
								bp_terms' id</a>　
                  <a href="./download/cc_terms.txt" target="_Blank" class="txt" onMouseOut="this.style.textDecoration='underline'" onMouseOver="this.style.textDecoration='none'">
								cc_terms' id</a>　
                  <a href="./download/do_terms.txt" target="_Blank" class="txt" onMouseOut="this.style.textDecoration='underline'" onMouseOver="this.style.textDecoration='none'">
								do_terms' id</a>　
                  <br /> Input two disease ids to calculate the Similarity Degree <i> <font>For Example: <a
									style="text-decoration: underline; color: #EB1D1D;"
									onMouseOut="this.style.textDecoration='underline'"
									onMouseOver="this.style.textDecoration='none'"
									onclick="document.getElementById('searcharea').value='acute myocardial infarction';">
										acute myocardial infarction</a>.

							</font></i>
                </p>
                <div class="search">
                  <input type="text" name="id1" id="searcharea1" class="txtBox1" placeholder="disease term id1" style="margin-left: 10px; padding: 0px 10px; height: 25px; width: 200px; font: normal 16px/23px Arial, Helvetica, sans-serif;" />
                  <font style="font: normal 16px/23px Arial, Helvetica, sans-serif; margin-left: -270px;">and</font>
                  <input type="text" name="id2" id="searcharea2" class="txtBox1" placeholder="disease term id2" style="margin-left: 120px; padding: 0px 5px; top: 50px; height: 25px; width: 200px; font: normal 16px/23px Arial, Helvetica, sans-serif;" />
                </div>
              </div>

              <div class="post">
                <h2 class="title">Step2. Select threshold of similarities between diseases.</h2>
                <p>Select adjusted p-value of similarities for threshold.</p>
                <div class="search">
                  <font id="panel_font"> <input type="radio" name="pvalue" checked="checked" value="getRss" /> Rss
                  </font>
                  <font id="panel_font"> <input type="radio" name="pvalue" value="getARss" /> ARss
                  </font>

                </div>
              </div>
            </div>

            <!-- step 1 -->

            <!-- step 2 选择计算方法 -->
            <!-- <div class="container">  -->

            <!-- </div> -->
            <!-- step 2 -->
            <div class="post">

              <div class="search">
                <input type="submit" name="Submit" value="&nbsp;&nbsp;Submit&nbsp;&nbsp;" class="btn blue_2" />
              </div>
            </div>
            <!--- step 3 -->
            <div class="container">
              <div class="post">
                <h2 class="title">Step3. 查看结果.</h2>

                <p class="byline">The result of the Algorithm is as follows.</p>

                <input type="text" id="result" placeholder="Result" class="txtBox1" style=>
                <!-- <div class="search">
                                    <select name="programNum" class="txtBox1">
								<option value="1" selected>1 or more</option>
								<option value="2">2 or more</option>
								<option value="3">3 or more</option>
								<option value="4">4 or more</option>
								<option value="5">5 </option>
							</select>
                                </div> -->
              </div>
              <a id="graphlink" href="NetworkGraph.jsp?id1=GO:0016321&id2=GO:0030970">Show
						NetworkGraph</a>
            </div>
            <!--- step 3 -->



          </form>

        </div>
        <!-- end #content -->


        <div style="clear: both;">&nbsp;</div>
      </div>
      <%@include file="foot.jsp"%>
        <!-- end #footer -->
  </body>

  </html>